<template>
  <div class="left_content">
    <div class="top_bg">
      <img
        src="../../assets/icon/center_left_title_bg.png"
        alt=""
      >
      <div>带班领导</div>
    </div>
    <div class="bottom_bg">
      <img
        src="../../assets/icon/center_left_bg.png"
        alt=""
      >
      <div class="bottom_bg_infs">
        <img
          class="header_img"
          src="../../assets/icon/center_left_icon.png"
          alt=""
        >
        <div class="bottom_bg_infs_group">
          <div class="bottom_bg_infs_item">
            <img
              src="../../assets/icon/center_left_info_bg2.png"
              alt=""
            >
            <span class="titles">姓名</span>
            <div
              class="infs infs_l infs_b"
              style="font-size: 2.5rem;"
            >
              {{ currentShift.leader || '向家珍' }}
            </div>
          </div>
          <div class="bottom_bg_infs_item as">
            <img
              src="../../assets/icon/center_left_info_bg2.png"
              alt=""
            >
            <span class="titles">班别</span>
            <div
              class="infs"
              style="font-size: 2.5rem;"
            >
              {{ currentShift.time || '07:30~12:30' }}
            </div>
          </div>
          <div class="bottom_bg_infs_item">
            <img
              src="../../assets/icon/center_left_info_bg2.png"
              alt=""
            >
            <span class="titles">电话</span>
            <div
              class="infs infs_l"
              style="font-size: 2.5rem;"
            >
              {{ currentShift.phone || '111' }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
    data() {
        return {
            // shifts: [],
            currentShift: {},
            timer: null,
            bc_1: 0,
            bc_2: 0,
            bc_3: 0,
        };
    },
    mounted() {
        this.$axios.get('/api/displayboard/monitor/boards').then(res => {
            if (res.code != 200) return
            this.updateShift(res.data?.shifts);
            this.timer = setInterval(() => {
                this.updateShift(res.data?.shifts);
            }, 600000);
        })


    },
    beforeUnmount() {
        clearInterval(this.timer);
    },
    methods: {
        updateShift(data) {
            this.bc_1 = data.find(e => e.name === '早班') ? +data.find(e => e.name === '早班').time.substring(0, 2) : 7;
            this.bc_2 = data.find(e => e.name === '中班') ? +data.find(e => e.name === '中班').time.substring(0, 2) : 12;
            this.bc_3 = data.find(e => e.name === '晚班') ? +data.find(e => e.name === '晚班').time.substring(0, 2) : 23;
            // console.log(this.bc_1,this.bc_2,this.bc_3);

            const now = new Date();
            const current = now.getHours() * 60 + now.getMinutes();
            const morning = this.bc_1 * 60 + 30;
            const afternoon = this.bc_2 * 60 + 30;
            const night = this.bc_3 * 60 + 30;

            this.currentShift = data.find(s => {
                if (current >= night || current < morning) {
                    this.$EventBus.$emit('monitorId', s.monitorId);
                    return s.name === '晚班';
                } else if (current >= afternoon) {
                    this.$EventBus.$emit('monitorId', s.monitorId);
                    return s.name === '中班';
                } else if (current >= morning) {
                    this.$EventBus.$emit('monitorId', s.monitorId);
                    return s.name === '早班';
                }
            }) || {};

            // console.log(this.currentShift, 111);

        }
    },
};
</script>

<style scoped lang="scss">
@font-face {
    font-family: 'kuaikanshijieti';
    src: url('../../assets/font/kuaikanshijieti-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

.left_content {
    width: 41%;
}

.top_bg {
    width: 100%;
    position: relative;

    img {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    div {
        width: 100%;
        position: absolute;
        text-align: center;
        font-size: 2.5rem;
        font-weight: 400;
        letter-spacing: 5px;
        color: #fff;
        font-family: kuaikanshijieti;
        z-index: 3;
        padding-top: .9rem;
    }
}

.bottom_bg {
    width: 100%;
    position: relative;

    img {
        width: 100%;
    }

    .bottom_bg_infs {
        width: 100%;
        margin-bottom: 2%;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 3;
        display: flex;
        align-items: flex-start;
        height: auto;

        .header_img {
            width: 44%;
        }

        .bottom_bg_infs_group {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            height: 300px;
        }

        .as {
            margin: 30px 0;
        }

        .bottom_bg_infs_item {
            width: 100%;
            height: 72px;
            position: relative;

            img {
                position: absolute;
                left: -50px;
                top: 0;
            }

            .titles {
                font-size: 2rem;
                font-weight: bold;
                letter-spacing: 5px;
                color: rgba(61, 165, 255, 1);
                text-align: left;
                vertical-align: top;
                position: absolute;
                left: 10%;
                top: 12%;
            }

            .infs {
                font-size: 1.5rem;
                font-weight: 700;
                letter-spacing: 0px;
                color: rgba(255, 255, 255, 1);
                text-align: right;
                vertical-align: top;
                position: absolute;
                right: 15%;
                top: 8%;
            }
        }
    }
}

@media (max-width: 480px) and (max-height: 360px) {

    .top_bg {

        div {
            font-size: 1.5rem;
            letter-spacing: .2rem;
            padding-top: .2rem;
        }
    }



    .bottom_bg {
        width: 100%;
        position: relative;

        img {
            width: 100%;
        }

        .bottom_bg_infs {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 3;
            display: flex;
            align-items: flex-start;

            .header_img {
                width: 44%;
                margin-bottom: 3%;
            }

            .bottom_bg_infs_group {
                width: 56%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                height: 72px;
            }

            .as {
                margin: .5rem 0;
            }

            .bottom_bg_infs_item {
                width: 100%;
                height: 30px;
                position: relative;

                img {
                    position: absolute;
                    left: -10px;
                    top: 0;
                }

                .titles {
                    font-size: 1.2rem;
                    font-weight: 400;
                    letter-spacing: .1rem;
                    color: rgba(61, 165, 255, 1);
                    text-align: left;
                    vertical-align: top;
                    position: absolute;
                    left: 0;
                    top: 4%;
                }

                .infs {
                    font-size: 1.2rem;
                    font-weight: 700;
                    color: rgba(255, 255, 255, 1);
                    text-align: right;
                    vertical-align: top;
                    position: absolute;
                    right: 5%;
                    top: 7%;
                }
            }
        }
    }
}

@media (max-width: 420px) {

    .top_bg {

        div {
            font-size: 1.2rem;
            letter-spacing: .2rem;
            padding-top: .2rem;
        }
    }



    .bottom_bg {
        width: 100%;
        position: relative;

        img {
            width: 100%;
        }

        .bottom_bg_infs {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 3;
            display: flex;
            align-items: flex-start;

            .header_img {
                width: 44%;
                margin-bottom: 3%;
            }

            .bottom_bg_infs_group {
                width: 56%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                height: 62px;
            }

            .as {
                margin: .2rem 0;
            }

            .bottom_bg_infs_item {
                width: 100%;
                height: 20px;
                position: relative;

                img {
                    position: absolute;
                    left: -10px;
                    top: 0;
                }

                .titles {
                    font-size: .8rem;
                    font-weight: 400;
                    letter-spacing: .1rem;
                    color: rgba(61, 165, 255, 1);
                    text-align: left;
                    vertical-align: top;
                    position: absolute;
                    left: 12%;
                    top: 10%;
                }

                .infs_b {
                    width: 5rem;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .infs {
                    font-size: .8rem;
                    font-weight: 700;
                    color: rgba(255, 255, 255, 1);
                    text-align: right;
                    vertical-align: top;
                    position: absolute;
                    right: 15%;
                    top: 5%;
                }

                .infs_l {
                    font-size: .9rem;
                    font-weight: 700;
                    color: rgba(255, 255, 255, 1);
                    text-align: right;
                    vertical-align: top;
                    position: absolute;
                    right: 15%;
                    top: 5%;
                }
            }
        }
    }
}
</style>